<template>

    <div class="activateAccount">
        <div class='moduleHead'>
            <span @click="toLogin" class="back"></span>
            <span>{{language.unify_siteName}}</span>
        </div>
        <div class="body">
            <h3>{{language.activateAccount_welcomeBack}}</h3>
            <p>
                {{language.activateAccount_desc}}
            </p>
            <input v-model="password" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" type="password" class="input_password" placeholder="Password">
            <div class="btn_box">
                <button @click="submitData" class="btn">{{language.activateAccount_buttonYes}}</button>
                <button @click="toLogin" class="btn btn_cancel">{{language.activateAccount_buttonNo}}</button>
            </div>
        </div>
        <loading :props="{show:loadingAjax,type:'page'}"></loading>
        <publicDialog :props="dialogData"></publicDialog>
    </div>
</template>
<script>
import * as API from '../api'
import loading from './Loading'
import publicDialog from './PublicDialog'

export default {

    name: 'activateAccount',

    data() {
        return {
            password: '',
            loadingAjax: false,
            dialogData:{},
            
        }
    },

    components: {
        publicDialog,
        loading
    },

    activated() {
        this.dialogData = {}
    },

    methods: {

        toLogin() {
            this.$router.push({
                name: 'login'
            });
        },

        submitData() {
        console.log('123')
            var tthis = this;
            if (!this.loadingAjax) {
                this.loadingAjax = true;
                API.reactivate({
                    data: {
                        username: this.$route.query.userName,
                        password: this.password
                    },
                    success: function(data) {
                        if (typeof(data.results) != 'undefined' && parseInt(data.results) == 1) {
                            tthis.toLogin();
                        } else {
                             tthis.dialogData = {
                                position: 'top',
                                type: 'error',
                                content: {
                                    info: data.errmsg,
                                }
                            };
                        }
                    },
                    complete: function() {
                        tthis.loadingAjax = false;
                    }
                })
            }
        }
    }
}

</script>
<style scoped>
.activateAccount {
    padding-top: 44px;
    background-color: #f5f7f8;
}

.activateAccount .body {
    padding: 20px;
    padding-top: 0;
    text-align: center;
    color: #7D6E6E;
    font-size: 17px;
}

.activateAccount h3 {
    padding-top: 40px;
    padding-bottom: 14px;
}

.activateAccount p {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 10px;
    text-align: left;
    text-indent: 38px;
}

.activateAccount .btn_box {
    padding-top: 20px;
}

.activateAccount .input_password {
    width: 100%;
    text-indent: 15px;
    height: 44px;
    font-size: 14px;
    line-height: 44px;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background-color: #fff;
    box-sizing: border-box;
    margin-top: 10px;
}

.activateAccount .btn_box button {
    margin-bottom: 12px;
}

.activateAccount .btn_box .btn_cancel {
    background-color: #d0d0d0;
    border: 1px solid #d0d0d0;
    width: 100%;
}

</style>
